<template>
    <div class="echart" id="echartTwo"></div>
</template>
<script>
import echarts from 'echarts'
import { getSupplierApi } from '@/apis/homeApi'
export default {
    data(){
        return {
            echartTwo: '',
            supplier:[],
            paid:[],
            unpaid: []

        }
    },
    mounted(){
        this.echartTwo = echarts.init(document.getElementById('echartTwo'))
        getSupplierApi().then(d => {
            d.data.forEach((it,index) => {
                if(index < 12) {
                    this.supplier.push(it.customerName)
                    this.paid.push(Number(it.paid))
                    this.unpaid.push(it.unpaid)
                }
            });
            this.draw(this.echartTwo)
        })
    },
    methods: {
        draw(echart){
            let option = {
                title : {
                    text: '供应商款项统计',
                    subtext: '蜀道医疗科技有限公司',
                    top: 10,
                    left: 20
                },
                tooltip : {
                    trigger: 'axis'
                },
                legend: {
                    data:['已付','未付'],
                    top: 20
                },
                grid: {
                        top: 80
                    },
                xAxis : [
                    {
                        type : 'category',
                        data : this.supplier
                    }
                ],
                yAxis : [
                    {
                        type : 'value'
                    }
                ],
                series : [
                    {
                        name:'已付',
                        type:'bar',
                        data: this.paid
                    },
                    {
                        name:'未付',
                        type:'bar',
                        data: this.unpaid
                    }
                ]
            };
            echart.setOption(option)
        }
    }
}
</script>
<style lang="less" scoped>
    .echart {
        width: 100%;
        height: 100%;
    }
</style>